/**
 * Created with JetBrains WebStorm.
 * User: Tao
 * Date: 13-3-18
 * Time: 下午8:37
 * To change this template use File | Settings | File Templates.
 */

Ext.application({

    name:'Demo',

    launch:function(){

        var store = Ext.create('Ext.data.Store',{

            sorters:'name',

            fields:[
                  'name','url'
            ],
            data:[
                { name:'html 5 and css',url:'images/1.jpg'},
                {name:'游戏开发',url:'images/2.jpg'},
                {name:'程序设计',url:'images/3.jpg'}
            ]
        });

        var tpl = new Ext.XTemplate(

            '<tpl>',
            '<div style="font-size: 12">',
            '<img src="{url}" width="100" title="{name}"/></br>',
            '{name}',
            '</div>',
            '</tpl>'
        );

        var editButton = Ext.create('Ext.Button',{

            text:'修改书名',
            disabled:true,
            handler:function(){
                var record = dataview.getSelection()[0];
                var bookName = record.get('name');
                Ext.Msg.prompt('编辑书名','请输入书名',
                    function(button,value){
                        if(button == 'ok' && value != ''){
                            var record = dataview.getSelection()[0];
                            record.set('name',value);
                        }
                    },
                    this,false,bookName,{width:280}
                )
            }

        });
        var toolbar = Ext.create('Ext.Toolbar',{

            docked:'top',
            items:[
                {
                    xtype:'spacer'
                },
                editButton
            ]
        });
        var dataview = Ext.create('Ext.DataView',{

            fullscreen:true,
            scrollable:'vertical',
            store:store,
            items:toolbar,
            itemTpl:tpl,
//            itemCls:'bookItem',
            listeners:{
                itemsingletap:function(dataview,index,item,record,e){
                    Ext.Msg.alert('单击'+store.getAt(index).get('name'));
                },
                itemdoubletap:function(dataview,index,item,record,e){
                    Ext.Msg.alert('双击'+store.getAt(index).get('name'));
                },
                itemswipe:function(dataview,index,item,record,e){
                    Ext.Msg.alert('您选择了'+store.getAt(index).get('name'));
                },
                selectionchange:function(dataview,records){
                    editButton.setDisabled(false);
                }

            }



        });
        Ext.Viewport.add(dataview);
    }

});